<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>learning online</title>
    <link rel="stylesheet" href="h11.css">
    <link rel="stylesheet" href="h12.css">
</head>
<body>
    <header>
    	<!--logo-->
    	<div class="logo">
    		<h1>
    			<a href="#">你好啊</a>
    		</h1>
    	</div>
    	<!---->
    	<nav>
    		<ul>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">课程</a></li>
    			<li><a href="#">职业规划</a></li>
    		</ul>
    	</nav>
    	<!--search-->
    	<div class="search">
    	<input type="search" placeholder="请输入关键字"/><button></button>
    	</div>
    	<!--personal-->
    	<div class="personal">
    	<dl>
    		<dt>个人中心</dt>
    		<dd>
    			<s><img src="images/ld.png" alt=""></s>
    			<span><img src="images/pic.png"/>bruceluo</span>
    		</dd>
    	</dl>
    	</div>
    </header>
	<div class="banner">
		<div class="w inner">
			<ul>
				<li>
					<a href="#"><img src="images/banner.jpg"></a>
				</li>
			</ul>
			<!--侧边栏-->
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">前端开发<span>></span></a></li>
				</ul>
			</div>
			<!--小圆点-->
			<div class="circle">
				<i class="current"></i>
				<i></i>
				<i></i>r
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div class="timebook">
				<ul>
					<li class="my"><a href="#">我的课程表</a></li>
					<li class="keep"><a href="#">继续学习 程序语言设计 
						<p>正在学习-使用对象</p></a></li>
					<li class="keep"><a href="#">继续学习 程序语言设计 
						<p>正在学习-使用对象</p></a></li>
					<li class="keep"><a href="#">继续学习 程序语言设计 
						<p>正在学习-使用对象</p></a></li>
					<li class="all"><a href="#">全部课程</a></li>
				</ul>
			</div>
			
		</div>
	</div>
	<!--精品推荐-->
	<div class="recommend w">
		<div class="rec-l">
			<strong>精品推荐</strong>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
			<a href="#">jquery</a>|
		</div>
		<em>修改兴趣</em>
	</div>
	
	<!--精品产品-->
	<div class="products w">
		<div class="pro-header">
			<h4>精品推荐</h4>
			<a href="#">查看全部</a>
		</div>
		<div class="pro-content clearfix">
			<ul>
				<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
					<li>
					<div class="pic">
						<img src="images/pic1.png" alt="" />
					</div>
					<div class="pro-title">
						Think PHP 5.0 博客系统实战项目演练
					</div>
					<p><span>高级 </span>·1125人在学习</p>
				</li>
				
			</ul>
		</div>
	</div>
	
	<!--底部-->
	<footer>
		<div class="w">
			<div class="footer-l">
				<img src="images/logo.png"/>
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
				<a href="#">下载app</a>

			</div>
			<div class="footer-r">
				<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>
     	 		<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>
     	 		<dl>
     	 			<dt>关于学成网</dt>
     	 			<dd>关于</dd>
     	 			<dd>管理团队</dd>
     	 			<dd>工作机会</dd>
     	 			<dd>客户服务</dd>
     	 			<dd>帮助</dd>
     	 		</dl>

			</div>
		</div>
	</footer>
</body>
</html>